<template>
    <div class="add-container">
      <el-card>
        <h2>新增学生</h2>
        <hr />
        <el-form ref="form" :model="sizeForm" label-width="80px" size="mini" class="form">
            <el-form-item label="姓名" class="item">
                <el-input v-model="sizeForm.name" class="item.iput" placeholder="请输入"></el-input>
            </el-form-item>

            <el-form-item label="特殊资源">
                <el-radio-group v-model="sizeForm.resource" size="medium">
                <el-radio border label="男"></el-radio>
                <el-radio border label="女"></el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="出生日期" class="item">
                <el-input v-model="sizeForm.name" class="item.iput" placeholder="请输入"></el-input>
            </el-form-item>

            <el-form-item label="学校名称">
                <el-select v-model="sizeForm.region" placeholder="请选择">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="学号" class="item">
                <el-input v-model="sizeForm.name" class="item.iput" placeholder="请输入"></el-input>
            </el-form-item>

            <el-form-item label="入学年份">
                <el-select v-model="sizeForm.region" placeholder="请选择">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="年级">
                <el-select v-model="sizeForm.region" placeholder="请选择">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="班级">
                <el-select v-model="sizeForm.region" placeholder="请选择">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="平台授予荣誉(选填)" class="ping">
                    <el-button type="primary" @click="showDialog = true">新增+</el-button>
            </el-form-item>

            <el-form-item label="平台授予学术(选填)" class="ping">
                    <el-upload
                      class="upload-demo"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      :on-preview="handlePreview"
                      :on-remove="handleRemove"
                      :file-list="fileList"
                      list-type="picture">
                      <el-button size="small" type="primary">新增+</el-button>
                      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
                    </el-upload>
            </el-form-item>

            <el-form-item label="平台授予成果(选填)" class="ping">
                    <el-upload
                      class="upload-demo"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      :on-preview="handlePreview"
                      :on-remove="handleRemove"
                      :file-list="fileList"
                      list-type="picture">
                      <el-button size="small" type="primary">新增+</el-button>
                      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
                    </el-upload>
            </el-form-item>
            <hr />
            <el-button type="success" class="btn">提交</el-button>
        </el-form>

      </el-card>

      <!-- 弹出层 -->
    <el-dialog title="平台授予荣誉" :visible='showDialog' @close="btnCancel">
        <el-form label-width="120px">
                <el-form-item label="上传荣誉图片">
                    <el-upload
                      class="upload-demo"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      :on-preview="handlePreview"
                      :on-remove="handleRemove"
                      :file-list="fileList"
                      list-type="picture">
                      <el-button size="small" type="primary">点击上传</el-button>
                      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="填写荣誉图片">
                    <el-input style="width:50%" placeholder="请输入" />
                </el-form-item>
        </el-form>
        <template v-slot:footer>
                <el-row type="flex" justify="center">
                    <el-col :span="6">
                    <el-button size="small" @click="btnCancel">取消</el-button>
                    <el-button type="primary" size="small" @click="btnCancel">确定</el-button>
                    </el-col>
                </el-row>
        </template>
    </el-dialog>

    </div>
</template>

<script>
export default {
  name: 'AddView',
  components: { },
  data () {
    return {
      sizeForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      showDialog: false,
      fileList: []
    }
  },
  methods: {
    onSubmit () {
      console.log('submit!')
    },
    btnCancel () {
      this.showDialog = false
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    }
  }
}
</script>
<style scoped lang='scss'>
.add-container{
    background-color: #E6E6E6;
    padding: 20px;
    .form{
        padding: 20px;
        .ping{
            padding-top: 25px;
        }
        .btn{
            width: 150px;
        }
    }
    .item{
    width: 280px;
}

}

</style>
